

<script  lang="ts" setup>
import Icon from '#/components/Icons';
import Upload from '#/components/Upload';
import {
  Input,
  Button
} from 'ant-design-vue';
import Draggable from 'vuedraggable';
import { ref,watch } from 'vue';
import { h } from 'vue';

import { cloneDeep } from '@vben/utils';
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [{id:1, image: '', text: '' }],
  },
});


const emit =defineEmits<{ (e: 'update:modelValue', value: array): void; }>()

const localList = ref([]);
onMounted(() => {
    localList.value = props.modelValue;
});


const handleInputChange = (index: number, value: string) => {
  if (!localList.value[index]) return;
  localList.value[index].text = value; // 更新本地列表中的文本
  emit('update:modelValue', [...localList.value]); // 通知父组件更新
};



watch(
  () => props.modelValue,
  (newValue) => {
  console.log(newValue)
    if (!Array.isArray(newValue)) {
      localList.value = [{ id: Date.now(), image: '', text: '' }];
        emit('update:modelValue', [...localList.value]);
      return;
    }

    if (JSON.stringify(newValue) !== JSON.stringify(localList.value)) {
      localList.value = cloneDeep(newValue); // 使用深拷贝
      emit('update:modelValue', [...localList.value]);
     
    }
  },
  { immediate: true, deep: true }
);

// 添加新项
const add = () => {
  localList.value.push({
    id: Date.now() + Math.random(), // 添加唯一 ID
    image: '',
    text: '',
  });
  emit('update:modelValue', [...localList.value]);
};

// 删除项
const remove = (index) => {
  localList.value.splice(index, 1);
  emit('update:modelValue', [...localList.value]);
};



const onUploadChange = (info, index) => {
  // 假设组件返回的 info 是 [{ url: "https://yourdomain.com/image.jpg" }]
  const fileItem = Array.isArray(info) ? info[0] : info;
  if (fileItem && fileItem.url) {
    localList.value[index].image = fileItem.url; // ✅ 设置图片路径
     emit('update:modelValue', [...localList.value]);
  }
};


</script>

<template>
  <div>

    <Draggable v-model="localList" item-key="id" handle=".drag-handle" animation="300"> 
      <template #item="{ element, index }">
        <div class="flex items-center gap-4 mb-4 p-4 border rounded img-text-container">
          <span class="drag-handle cursor-move mr-2 text-xl">☰</span>

          <!-- 上传图片 -->
          <Upload v-model="element.image" ></Upload>


              <!-- 输入文字 -->
             <Input  :value="element.text"  placeholder="请输入文字"  @input="(e) => handleInputChange(index, e.target.value)"  />
         
            <!-- 删除按钮 -->
            <span class="anticon" @click="remove(index)"><Icon icon="ri:delete-bin-line" /></span>
          
       
        </div>
      </template>
    </Draggable>

    <!-- 添加按钮 -->
    <Button type="dashed" block @click="add">
       添加图文
    </Button>
  </div>
</template>


<style scoped>
.drag-handle {
  cursor: move;
}
.imgtext-uploader  {
  :deep(.ant-upload) {
    width: 40px !important;
    height: 40px !important;
  }
}
.img-text-container {
  :deep(.ant-upload-list-item-container){
    width: 40px !important;
    height: 40px !important;
  }
  :deep(.upload-init-me){
    width: 40px !important;
    height: 40px !important;
  }
  :deep(.upload-init-me div){
    display: none;
  }

 
}

</style>
